"use client";

import Link from "next/link";
import { usePathname } from 'next/navigation';
import { Menu, FolderPlus, Library, LogOut, Languages, LayoutGrid } from "lucide-react"
import Image from "next/image";
import { useSession, signOut } from 'next-auth/react';
import {
    NavigationMenu,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
  } from "@/components/ui/navigation-menu"
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useLanguage } from '@/contexts/LanguageContext';
import { UserDropdown } from '@/components/ui/user-dropdown';

export function Header() {
  const pathname = usePathname();
  const { language, toggleLanguage, t } = useLanguage();
  const { data: session } = useSession();

  if (!t) return null;

  const handleSignOut = () => {
    signOut({ callbackUrl: '/' });
  };

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo - 靠左 */}
          <Link href="/" className="flex items-center">
            <Image src="/logo2.png" alt="PromptMinder" width={60} height={60} />
            <span className="hidden sm:block text-xl font-bold [-webkit-background-clip:text] [background-clip:text] text-transparent bg-gradient-to-r from-gray-900 to-gray-600 ml-2">
              PromptMinder
            </span>
          </Link>

          {/* Navigation & Auth - 靠右 */}
          <div className="flex items-center gap-6">
            {/* Center Navigation */}
            {session && (
              <NavigationMenu className="hidden sm:flex">
                <NavigationMenuList className="space-x-6">
                  <NavigationMenuItem>
                    <Link href="/prompts" legacyBehavior passHref>
                      <NavigationMenuLink
                        className={`${
                          pathname === '/prompts'
                            ? 'text-primary font-medium'
                            : 'text-muted-foreground'
                        } flex items-center gap-1 hover:text-primary transition-colors`}
                      >
                        <LayoutGrid className="h-4 w-4" />
                        {t.header.manage}
                      </NavigationMenuLink>
                    </Link>
                  </NavigationMenuItem>
                  
                  <NavigationMenuItem>
                    <Link href="/prompts/new" legacyBehavior passHref>
                      <NavigationMenuLink
                        className={`${
                          pathname === '/prompts/new'
                            ? 'text-primary font-medium'
                            : 'text-muted-foreground'
                        } flex items-center gap-1 hover:text-primary transition-colors`}
                      >
                        <FolderPlus className="h-4 w-4" />
                        {t.header.new}
                      </NavigationMenuLink>
                    </Link>
                  </NavigationMenuItem>

                  <NavigationMenuItem>
                    <Link href="/template" legacyBehavior passHref>
                      <NavigationMenuLink
                        className={`${
                          pathname === '/template'
                            ? 'text-primary font-medium'
                            : 'text-muted-foreground'
                        } flex items-center gap-1 hover:text-primary transition-colors`}
                      >
                        <LayoutGrid className="h-4 w-4" />
                        {t.header.template || '模板'}
                      </NavigationMenuLink>
                    </Link>
                  </NavigationMenuItem>
                </NavigationMenuList>
              </NavigationMenu>
            )}

            {/* Right aligned auth buttons & Language Switcher */}
            <div className="flex items-center space-x-3">
              <Button variant="outline" size="icon" onClick={toggleLanguage}>
                  <Languages className="h-5 w-5" />
              </Button>
              {!session ? (
                <div className="flex items-center space-x-4">
                  <Link href="/sign-in">
                    <button className="px-4 py-2 text-gray-600 hover:text-gray-900 transition-colors">
                      {t.auth.login}
                    </button>
                  </Link>
                  <Link href="/sign-up">
                    <button className="px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors">
                      {t.auth.signup}
                    </button>
                  </Link>
                </div>
              ) : (
                <UserDropdown 
                  user={session.user} 
                  onSignOut={handleSignOut}
                  t={t}
                />
              )}
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}
